<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../script/jqmobile/jquery.mobile-1.0.css" />
<script type="text/javascript" src="../script/jquery/jquery-1.6.4.js"></script>
<script type="text/javascript" src="../script/jqmobile/jquery.mobile-1.0.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBcB0_eXO8ClS066IaFT-wMJ8mArvkXdYs&sensor=false"></script>
<script src="http://maps.google.com/maps/api/jssensor=false"></script>
<style>
	#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }
</style>
<script type="text/javascript">
$( "#map-page" ).live( "pageinit", function() {
	var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);
	if ( navigator.geolocation ) {
		function success(pos) {
			// Location found, show coordinates on map
			drawMap(new google.maps.LatLng(
			pos.coords.latitude, pos.coords.longitude));
		}
		
		function fail() {
			drawMap(defaultLatLng); // Show default map
		}

		// Find users current position
		navigator.geolocation.getCurrentPosition(success, fail,
		{enableHighAccuracy:true, timeout: 6000, maximumAge: 500000});
	}else {
		drawMap(defaultLatLng); // No geolocation support
	}

	function drawMap(latlng) {
		var myOptions = {
			zoom: 10,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(
		document.getElementById("map-canvas"), myOptions);
		// Add an overlay to the map of current lat/lng
		var marker = new google.maps.Marker({
			position: latlng,
			map: map,
			title: "Greetings!"
		});
	}

});
</script>
</head>

<body class="ui-mobile-viewport">
	<div data-role="page" id="map-page">
	<div data-role="header">
	<h1>Maps</h1>
	</div>
	<div data-role="content" id="map-canvas">
	<!-- map loads here... -->
	</div>
</div>
</body>
</html>